<template>
	<layout>
		<view class="signIn">
			<div class="signIn-map">
				<map style="width: 100%; height: 100%;" :latitude="lat" :longitude="lng" :markers="covers" :circles="circles">
				</map>
			</div>
			<view class="signIn-info">
				<view class="course">
					{{detail.courseName || ''}}
				</view>
				<view class="address">
					{{detail.teacherName || ''}}
					{{detail.timeName || ''}}
					{{detail.buildingName || ''}}
					{{detail.classRoomName || ''}}
				</view>
				<view class="currentAddress">
					<!-- 当前定位：友谊大道186号 -->
				</view>
			<!-- 	<view class="isCanSignIn">
					距离上课教室所在位置3米，已进入签到范围
				</view> -->
				<view class="">
					<button
						:disabled="!canSignIn || (!!detail.attendStatus && detail.courseName)"
						type="primary"
						:class="[detail.attendStatus+'_status', 'status', !detail.courseName && 'nothing' ]" @click="submit()">
						<view class="btn-submit">
							<text v-if="canSignIn">
								<text v-if="!detail.attendStatus && signInTime == 2">签到</text>
								<text v-if="detail.attendStatus == 1">已签到</text>
								<text v-if="!detail.attendStatus && signInTime == 3">签到(迟到)</text>
								<text v-if="detail.attendStatus == 2">旷课</text>
								<text v-if="detail.attendStatus == 4">已请假，无需签到</text>
								<text v-if="!detail.attendStatus && signInTime == 1">未到上课签到时间</text>
							</text>
							<text v-else>
								<text v-if="detail.courseName">不在签到范围</text>
								<text v-else>不存在签到规则</text>
							</text>
							<uni-countdown v-if="time" color="#fff" splitorColor="#fff" :day="time.days" :hour="time.hours" :minute="time.minutes" :second="time.seconds" />
						</view>
					</button>
				</view>
			</view>
		</view>
	</layout>
</template>

<script>
	import {
		isCheckInRange,
		getDetail,
		saveSignIn,
	} from '@/api/signIn.js'
	import {
		calculateCountdown
	} from '@/utils/common.js'
	import layout from '../common/layout/layout.vue';
	export default {
		components: {
			layout
		},
		data() {
			return {
				detail: {
					
				},
				time: '',
				
				statusList: {
					1: '按时到课',
					2: '旷课',
					3: '迟到',
					4: '请假',
					5: '早退'
				},
				id:0,
				title: 'map',
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					width: 25,
					height: 35,
					id: 1,
				}],
				circles: [],
				canSignIn: false,
				signInTime: false,
				options: {},
				lat: 39.909,
				lng: 116.39742,
				timer: null
			}
		},
		onLaunch() {
			this.timer && clearInterval(this.timer)
		},
		beforeDestroy() {
			this.timer && clearInterval(this.timer)
		},
		onLoad(options) {
			this.options = options;
			this.getAuthorize();
			// this.getIsCanSignIn({
			// 	ruleId: options.id
			// });
			// this.timer = setInterval(() => {
			// 	this.getIsCanSignIn({
			// 		ruleId: options.id,
					
			// 	});
			// }, 2000)
		},
		mounted() {
			this.initMap();
			
		},
		methods: {
			initMap() {
			},
			calculateCountdown,
			submit(ref) {
					saveSignIn({
							ruleId: this.options.id,
							lat: this.lat,
							lng: this.lng
						})
						.then(data => {
							uni.showToast({
								title: '签到成功'
							})
							
						})
						.catch(data => {
							console.log('签到', {
								ruleId: this.options.id,
								lat: this.lat,
								lng: this.lng
							}, data);
							uni.showToast({
								title: data
							})
						})
				
			},
			timeup() {
				uni.showToast({
					title: '时间到'
				})
				this.timeupSecond = 29
			},
			getAuthorize() {
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							// 用户未授权，请求授权
							uni.authorize({
								scope: 'scope.userLocation',
								success: () => {
									// 用户同意授权，获取位置
									console.log('用户同意授权，获取位置');
									this.timer = setInterval(() => {
										
										this.getAddress();
									}, 2000)
								},
								fail: () => {
									// 用户拒绝授权
									console.log('用户拒绝授权');
								}
							});
						} else {
							// 用户已授权，直接获取位置
							console.log('用户已授权，直接获取位置');
							this.timer = setInterval(() => {
								
								this.getAddress();
							}, 2000)
						}
					},
					fail: () => {
						// 获取权限设置失败
						console.log('获取权限设置失败');
					}
				})
			},
			getAddress() {
				const _this = this;
				uni.getLocation({
					type: 'wgs84',
					isHighAccuracy: true,
					success: function(res) {
						console.log('getAddress', res)
						_this.lat = res.latitude;
						_this.lng = res.longitude;
						_this.covers = [
							{
								latitude: res.latitude,
								longitude: res.longitude,
								width: 25,
								height: 35,
								id: 1,
							},
						]
						
						_this.getIsCanSignIn({
							ruleId: _this.options.id,
						});
					},
					fail: function(error) {
						console.error('获取位置失败：', error);
					}
				});
			},
			getIsCanSignIn(params) {
				isCheckInRange({
						ruleId: this.options.id,
						lat: this.lat,
						lng: this.lng,
					})
					.then(data => {
						
						console.log(2222, data);
						this.detail = data.data || {};
						this.canSignIn = !!this.detail.canSignIn;
						
						if (this.canSignIn) {
							if (Date.now() < new Date(this.detail.startDate).getTime()) {
								this.signInTime = 1; // 未到签到时间
							}
							if (Date.now() > new Date(this.detail.startDate).getTime() &&  Date.now() < new Date(this.detail.endDate).getTime()) {
								this.signInTime = 2; // 可以正常签到
							}
							if ( Date.now() > new Date(this.detail.endDate).getTime()) {
								this.signInTime = 3; // 迟到
							}
							
						}
						
						if (!!this.detail.endDate) {
							this.time = this.calculateCountdown(this.detail.endDate);
						}
						
						if(data.data) {
							this.covers = [
								this.covers[0],
								{
									latitude: data.data.lat,
									longitude: data.data.lng,
									width: 25,
									height: 35,
									id: 2,
								}
							];
							
							this.circles = [{
								latitude: data.data.lat,
								longitude: data.data.lng,
								color: '#FF0000DD',
								fillColor: '#7cb5ec88',
								radius: data.data.distance,
								strokeWidth: 1
							
							}]
							
							console.log(this.covers);
						}

					}).catch(e => {
						console.log(11111, e);
						clearInterval(this.timer);
					})
			},
			getDetail(id) {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.signIn {
		height: 100vh;
		&-map {
			height: 60%;
		}
		&-info {
			height: 40%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.course {
				font-size: 36rpx;
				font-weight: bold;
				margin: 50rpx 0 30rpx;
			}
			.address {
				margin-bottom: 15rpx;
			}
			.currentAddress {
				margin-bottom: 15rpx;
			}
			.isCanSignIn {
				margin-bottom: 60rpx;
			}
		}
		
		.count-down {
			color: #ccc;
			font-size: 22rpx;
		}
		.btn-submit {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.status {
			background-color: #1aad19;
			color: #ffffff;
		}
		
		.1_status {
			background-color: #999 !important;
			color: #ffffff;
		}
		.2_status {
			background-color: #999 !important;
			color: #ffffff;
		}
		.3_status {
			background-color: #ffaa00 !important;
			color: #ffffff;
		}
		.4_status {
			background-color: #0081ff !important;
			color: #ffffff;
		}
		.5_status {
			background-color: #999 !important;
			color: #ffffff;
		}
		.undefined_status, .null_status, .nothing {
			background-color: #999 !important;
			color: #ffffff;
		}
	}
</style>